import { Component, OnInit, Input } from '@angular/core'
import { Widget } from '../../model'
import { JsonApiService } from '../../../../core/api/json-api.service'

declare var echarts: any;

@Component({
  selector: 'online-rate',
  templateUrl: './online-rate.html',
  styleUrls: ['./online-rate.css']
})
// 车辆在线率
export class OnlineRate implements OnInit, Widget {
  @Input() componentData: any
  // @Input() auth = true
  onlineRate = 0 + '%'
  loading = false


  constructor(private jsonApiService: JsonApiService) { }
  ngOnInit() {
    this.initData()
  }

  initData() {
    //创建绘图
    const chart = echarts.init(document.getElementById("onlinePie"));
    this.loading = true
    this.jsonApiService.http('control/station/car/rate/carOnlineRate.html', null, false).subscribe((result) => {
      this.loading = false
      this.onlineRate = result.data;
      const option = this.createOnlineForCarConfig();
      chart.setOption(option);
      $(window).resize(chart.resize);
    })
  }

  //车辆在线-饼图参数配置
  createOnlineForCarConfig() {
    const onlineNum = Number(this.onlineRate.replace('%', ''))
    var option = {
      calculable: true,
      emphasis: {
        disable: false
      },
      series: [
        {
          name: '在线',
          type: 'pie',
          radius: '50%',
          center: ['50%', '50%'],
          data: [{
            name: '在线',
            value: onlineNum,
            label: { show: false, position: 'inside' },
            itemStyle: {
              color: '#69aa46'
            },
          },
          {
            name: '离线',
            value: 100 - onlineNum,
            label: { show: false, position: 'inside' },
            itemStyle: {
              color: "#ccc"
            }
          }]
        }
      ],
      grid: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
    };
    return option;
  }
}
